<script setup>
import {ref} from "vue"
import WeiXinCode from "./weixincode.vue";
const sysInfo="父组件传过来的文章数据"
const shareUrl =location.href
const isOverlayVisible=ref(false)
 
/**
 * 分享到QQ
 */
const shareToQQ= function() {
  window.open(
      `https://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&title=${sysInfo}&source=${shareUrl}&desc=${sysInfo}&pics=`)
}
 
/**
 * 分享到微信：控制鼠标移入移出的页面是否出现
 */
const toggleOverlay=function () {
  isOverlayVisible.value = true
}
const outggleOverlay = () => {
  isOverlayVisible.value = false
}
/**
 * 分享到微博
 */
const shareToMicroblog = function () {
  //跳转地址
  window.open(
      `https://service.weibo.com/share/share.php?url=${ 
      shareUrl
      }&title=${ 
      sysInfo}`
  );
}
/**
 * 分享到qq空间
 */
const shareToQQRom = function () {
  //跳转地址
  window.open(
      `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${ 
      shareUrl
      }&title=${ 
      sysInfo 
      }&summary=${ 
      sysInfo}`
  );
}
</script>
 
<template>
  <div class="share">
    <a class="weibo" @click="shareToMicroblog()"/>
    <a class="qq" @click="shareToQQ()"/>
    <div class="weixinall">
      <a class="weixin" @mouseover="toggleOverlay()" @mouseleave="outggleOverlay()"/>
      <div class="weixincode">
        <WeiXinCode :is-visible="isOverlayVisible"/>vvv
      </div>
    </div>
    <a class="qqkj" @click="shareToQQRom()"/>
  </div>
</template>
 
<style lang="scss" scoped>
.share {
  display: flex;
  flex-wrap: nowrap;
  width: 150px;
  justify-content: space-between;
  .weibo {
    display: block;
    /* 设置行内元素为块状元素才能设置宽高 */
    width: 28px;
    height: 28px;
    /* 设置宽高才能显示背景 */
    background-image: url("src/assets/img/weibo.png") !important;
    background-size: cover;
    /* 相对位置是相对于css文件的位置而不是html */
    background-repeat: no-repeat;
    background-position: 50% 50%
  }
  .qq{
    display: block;
    /* 设置行内元素为块状元素才能设置宽高 */
    width: 28px;
    height: 28px;
    /* 设置宽高才能显示背景 */
    background-image: url("src/assets/img/qq.png");
    background-size: cover;
    /* 相对位置是相对于css文件的位置而不是html */
    background-repeat: no-repeat;
    background-position: 50% 50%
  }
  .qqkj {
    display: block;
    /* 设置行内元素为块状元素才能设置宽高 */
    width: 28px;
    height: 28px;
    /* 设置宽高才能显示背景 */
    background-image: url("src/assets/img/qqkj.png");
    background-size: cover;
    /* 相对位置是相对于css文件的位置而不是html */
    background-repeat: no-repeat;
    background-position: 50% 50%
  }
 
  .weixinall {
    position: relative;
    .weixin {
      display: block;
      /* 设置行内元素为块状元素才能设置宽高 */
      width: 28px;
      height: 28px;
      /* 设置宽高才能显示背景 */
      background-image: url("src/assets/img/weixin.png");
      background-size: cover;
      /* 相对位置是相对于css文件的位置而不是html */
      background-repeat: no-repeat;
      background-position: 50% 50%
    }
    .weixincode {
      position: absolute;
      left: -60px;
      z-index: 1000 !important;
    }
  }
}
</style>